import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Tooltip, Button,
  Radio, Icon, Drawer,
} from 'antd';
import { phone, email } from '@/utils/regular';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw, ContentState } from 'draft-js';

const FormItem = Form.Item;

const RadioGroup = Radio.Group;


@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
    this.state = {
      editorState: '',
    };
  }

  onEditorStateChange = (editorState) => {
    let text = draftToHtml(convertToRaw(editorState.getCurrentContent()));

    console.log(JSON.stringify(text) === JSON.stringify('<p></p>'));
    // if (convertToRaw(editorState.getCurrentContent()).blocks[0].text) {
    console.log(34);
    this.setState({
      editorState: '',
    });
    this.setState({
      editorState,
    });
    // } else {

    // }
  };
  onChange = (e) => {
    console.log(e);
  };
  // 表单
  renderContent = () => {
    const { form, values } = this.props;
    const { editorState } = this.state;
    const statusDom = () => {
      return <span><Tooltip placement="top" title='上架即发布，发布后无法撤销'>状态<Icon
        style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
        type="info-circle-o"
      /></Tooltip></span>;
    };
    return [
      <FormItem key="title" {...this.formLayout} label="标题">
        {form.getFieldDecorator('title', {
          rules: [{ required: true, message: '请输入标题！' }],
          initialValue: values.title,
        })(<Input placeholder="请输入标题"/>)}
      </FormItem>,

      <FormItem key="subTitle" {...this.formLayout} label="副标题">
        {form.getFieldDecorator('subTitle', {
          rules: [{ required: true, message: '请输入副标题！' }],
          initialValue: values.subTitle,
        })(<Input placeholder="请输入副标题"/>)}
      </FormItem>,
      <FormItem key="push" {...this.formLayout} label="推送">
        {form.getFieldDecorator('push', {
          rules: [{ required: true, message: '请选择是否推送！' }],
          initialValue: values.push,
        })(
          <RadioGroup>
            <Radio value={1}>是</Radio>
            <Radio value={2}>否</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="publishRange" {...this.formLayout} label="发布范围">
        {form.getFieldDecorator('publishRange', {
          rules: [{ required: true, message: '请选择发布范围！' }],
          initialValue: values.publishRange || 3,
        })(
          <RadioGroup>
            <Radio value={1}>android</Radio>
            <Radio value={2}>ios</Radio>
            <Radio value={3}>全部</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="frontShow" {...this.formLayout} label="首页通知">
        {form.getFieldDecorator('frontShow', {
          rules: [{ required: true, message: '请选择是否在首页通知！' }],
          initialValue: values.frontShow || 2,
        })(
          <RadioGroup>
            <Radio value={1}>是</Radio>
            <Radio value={2}>否</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="status" {...this.formLayout} label={statusDom()}>
        {form.getFieldDecorator('status', {
          rules: [{ required: true, message: '请选择状态！' }],
          initialValue: values.status,
        })(
          <RadioGroup>
            <Radio value={1}>上架</Radio>
            <Radio value={2}>下架</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="content" label="内容">
        {form.getFieldDecorator('content', {
          rules: [{ required: true, message: '请选填写公告内容！' }],
          initialValue: editorState,
        })(
          <Editor
            editorState={editorState}
            onEditorStateChange={this.onEditorStateChange}
            onContentStateChange={this.onChange}
          />,
        )}

      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;
    const { editorState } = this.state;
    const cancel = () => {
      const { form } = this.props;
      handleUpdateModalVisible(false, []);
      form.resetFields();

    };
    //完成
    const handleNext = () => {
      const { form, values, handleUpdate, handleAdd, modalVisible } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        let text = draftToHtml(convertToRaw(editorState.getCurrentContent()));
        console.log(text);
        const formVals = { ...values, ...fieldsValue };
        formVals.content = text;
        if (modalVisible) {
          handleAdd(formVals);
        } else {
          handleUpdate(formVals);
        }
      });
    };
    return (
      <Drawer
        title={modalVisible ? '新增' : '修改'}
        width={720}
        onClose={cancel}
        visible={updateModalVisible}
        style={{
          overflow: 'auto',
          height: 'calc(100% - 108px)',
        }}>
        {this.renderContent()}
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={() => cancel()} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={handleNext} type="primary">
            确定
          </Button>
        </div>
      </Drawer>
    );
  }
}

export default UpdateForm;
